<template>
  <div>
    <div style="float: left">
      <img :src="baseApi + message.avatar" class="avatar" />
    </div>

    <div style="display: inline-block; overflow: hidden; width: 800px">
      <div>
        <span class="user">{{ message.nickname }}</span>

        <el-popconfirm @confirm="delMessage" title="确定删除？">
          <template #reference>
            <el-button
              style="font-size: 15px; float: right"
              v-if="message.userId === userId"
            >
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </div>
      <div style="margin: 12px 0">
        {{ message.message }}
      </div>
      <span style="font-size: 10px">{{ message.createTime }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

const store = useStore();

// Props
const props = defineProps({
  message: {
    type: Object,
    default: () => ({}),
  },
  userId: {
    type: Number,
    default: 0,
  },
  index: {
    type: Number,
    default: 0,
  },
});

// Emits
const emit = defineEmits(["del-message"]);

// Data
const baseApi = ref<string>(store.state.baseApi);

// Methods
const delMessage = () => {
  console.log("del");
  store.state.request
    .delete("/api/market/message/" + props.message.id)
    .then((res: any) => {
      if (res.code === "200") {
        ElMessage.success("删除成功");
        emit("del-message", props.index);
      } else {
        ElMessage.error("删除失败");
      }
    });
};
</script>

<style scoped>
.avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  top: 4px;
}
.user {
  font-size: 14px;
  font-weight: inherit;
  color: #f69090;
  position: relative;
  word-wrap: break-word;
  line-height: 16px;
}
</style>
